<template>
  <div>
    <Card title="筛选">
      <div slot="action">
        <el-button
          plain
          round
          size="small"
          style="background-color: #B0BEE1"
          @click="clearSearchParams"
          >清空</el-button
        >
        <el-button type="primary" round size="small" @click="refresh"
          >查询</el-button
        >
      </div>
      <div class="search-box">
        <div class="search-item">
          <div class="tip">任务单号</div>
          <el-input
            v-model="searchParams.TaskNum"
            placeholder="请输入任务单号"
            clearable
          ></el-input>
        </div>
        <div class="search-item">
          <div class="tip">候选人姓名</div>
          <el-input
            v-model="searchParams.CandidateName"
            placeholder="请输入候选人姓名"
            clearable
          ></el-input>
        </div>
        <div class="search-item">
          <div class="tip">任务状态</div>
          <el-select
            v-model="searchParams.ParmTaskStateId"
            clearable
            placeholder="请选择任务状态"
          >
            <el-option
              v-for="item in GlobalCfg.taskStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-item">
          <div class="tip">任务进度</div>
          <el-select
            v-model="searchParams.ParmTaskProgressId"
            clearable
            placeholder="请选择任务进度"
          >
            <el-option
              v-for="item in GlobalCfg.taskProgress"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </Card>
    <Card title="任务列表" class="task-list">
      <div slot="action">
        <el-button
          type="primary"
          round
          size="small"
          @click="$refs.CreateTaskDialog.AddTask()"
          >新建任务</el-button
        >
      </div>
      <div style="padding: 12px 10px 22px;">
        <el-table class="dark-table" :data="tableData" style="width: 100%">
          <el-table-column prop="TaskNum  " label="任务单号" width="180">
            <div
              class="task-no"
              slot-scope="s"
              @click="
                $router.push({
                  path: '/task_detail',
                  query: { id: s.row.TaskNo },
                })
              "
            >
              {{ s.row.TaskNum }}
            </div>
          </el-table-column>
          <el-table-column prop="ContactName" label="HR名称" width="180">
          </el-table-column>
          <el-table-column prop="CandidateName" label="候选人名称">
          </el-table-column>
          <el-table-column prop="ParmTaskState" label="任务单状态">
          </el-table-column>
          <el-table-column prop="ParmTaskProgress" label="任务进度">
          </el-table-column>
          <el-table-column prop="ParmLanguage" label="报告语言">
          </el-table-column>
          <el-table-column prop="CreateTime" label="创建时间">
            <div slot-scope="s">{{ DateTimeParse(s.row.CreateTime) }}</div>
          </el-table-column>
          <el-table-column prop="SurveyEndDate" label="截止时间">
            <div slot-scope="s">{{ DateTimeParse(s.row.SurveyEndDate) }}</div>
          </el-table-column>
          <el-table-column prop="ShieldImage" label="调查结果" align="center">
            <div slot-scope="s">
              <TaskResultIcon :s="s.row.ShieldName" />
            </div>
          </el-table-column>
          <el-table-column prop="name" label="操作" align="center" width="210">
            <div class="action-group" slot-scope="s">
              <img
                v-if="s.row.ParmTaskProgress === '完成'"
                @click="openReport({ id: s.row.TaskNo })"
                class="action-icon"
                src="../../../assets/images/table/view.png"
                alt=""
              />
              <img
                class="action-icon"
                v-if="
                  s.row.ParmTaskState != '完成' &&
                    s.row.ParmTaskState != '进行中'
                "
                src="../../../assets/images/table/refresh.png"
                @click="updateState(s.row.TaskNo, 287)"
                alt=""
              />
              <i
                @click="updateState(s.row.TaskNo, 284)"
                v-if="s.row.ParmTaskState === '已暂停'"
                style="color: #5284ff;font-size: 25px;cursor: pointer;padding: 0 11px"
                class="el-icon-video-play"
              ></i>
              <img
                v-else
                class="action-icon"
                src="../../../assets/images/table/stop.png"
                @click="updateState(s.row.TaskNo, 286)"
                alt=""
              />
              <el-dropdown
                trigger="hover"
                v-if="s.row.ParmTaskProgress === '完成'"
              >
                <img
                  class="action-icon"
                  src="../../../assets/images/table/download.png"
                  alt=""
                />
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    @click.native="surveyReportPdf(s.row.fileNo)"
                  >
                    下载背调报告
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-if="s.row.IsCePing"
                    @click.native="CPReportDownload(s.row.TaskNo)"
                  >
                    下载性格评估报告
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-table-column>
        </el-table>
      </div>
    </Card>
    <div class="page-foot">
      <div style="width: 228px;height: 1px"></div>
      <Pagination
        ref="pagination"
        :requestFunc="requestFunc"
        :filterParams="filterParams"
        :params="searchParams"
        @returnData="returnData"
      ></Pagination>
      <div class="update-time">数据更新时间：{{ dataTime }}</div>
    </div>
    <CreateTaskDialog ref="CreateTaskDialog" @editSuccess="refresh" />
  </div>
</template>

<script>
import CreateTaskDialog from "./CreateTaskDialog.vue";
import list from "./list.js";
import dayjs from "dayjs";
import { CPDownUrl } from "@/config/url.js";
import { openReport } from "@/utils/common.js";
export default {
  mixins: [list],
  data() {
    return {
      dataTime: dayjs().format("YYYY/MM/DD HH:mm:ss"),
    };
  },
  methods: {
    openReport(p) {
      openReport(p);
    },
    CPReportDownload(id) {
      window.open(CPDownUrl + "?user_id=" + id);
    },
  },
  mounted: function() {},
  components: { CreateTaskDialog },
};
</script>
<style lang="scss">
.search-box {
  padding: 22px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  input::-webkit-input-placeholder {
    color: #373a4c;
  }
  input::-moz-input-placeholder {
    color: #373a4c;
  }
  input::-ms-input-placeholder {
    color: #373a4c;
  }
  input {
    color: #fff;
  }
  .search-item {
    display: flex;
    margin-right: 40px;
    flex: 1;
    align-items: center;
    .tip {
      color: #898a93;
      font-size: 12px;
      white-space: nowrap;
      margin-right: 10px;
    }
    .el-input,
    .el-select {
      flex: 1;
    }
    input {
      color: #b4bcca !important;
      background-color: #545775 !important;
      border: none !important;
    }
  }
}
.task-list {
  margin-top: 14px;
}
.page-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .update-time {
    font-size: 14px;
    color: #b9beeb;
    white-space: nowrap;
  }
}
</style>
